<template>
  <div id="login">
    <div class="login_box">
      <div class="welcome_box">
        <span class="welcome">欢迎使用</span><br />
        <span class="system">系统登录</span>
      </div>
      <div class="login">
        <!-- 用户名 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
        >
          <el-form-item prop="userName" label="用户名">
            <el-input
              class="userIup"
              prefix-icon="el-icon-user"
              v-model="ruleForm.userName"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="passWord">
            <span slot="label">
              <span>密&nbsp;&nbsp;&nbsp;码</span>
            </span>
            <!-- <el-input class="userIup" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="input" show-passWord></el-input> -->
            <el-input
              class="userIup"
              prefix-icon="el-icon-lock"
              v-model="ruleForm.passWord"
              type="password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="login_btn">
        <el-button class="loginBtn" type="primary" round @click="submitForm"
          >登录</el-button
        >
      </div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
    <span class="text1">双线质量管控体</span>
    <span class="text2">力求每件产品、每个细节都尽善尽美</span>
    <span class="text3">够专业 才放心</span>
    <span class="juzao1">ORDER聚造</span>
    <span class="juzao2">ORDER聚造</span>
    <span class="banquan"
      >All Rights Reserved &copy;2021 版权所有{{ "\xa0\xa0" }}{{ "\xa0\xa0"
      }}{{ "\xa0\xa0" }}{{ "\xa0\xa0" }} |
      {{ "\xa0\xa0" }}粤ICP备18069755号</span
    >
  </div>
</template>

<script>
import md5 from 'js-md5'
import Cookies from 'js-cookie'
// import axios from "axios";
// console.log(axios);

export default {
  name: "login",
  components: {},
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: false, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: false, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      //执行登录操作，登录成功跳转到home页面
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          Cookies.set('token',this.ruleForm.userName)
          // axios
          //   .get("/user",this.ruleForm)
          //   .then(function (response) {
          //     console.log(response);
          //   })
          //   .catch(function (error) {
          //     console.log(error);
          //   });

          this.$http({
            url: "/login",
            method: "POST",
            data: {
              userName: this.ruleForm.userName,
              passWord: md5(this.ruleForm.passWord),
              platform: "web",
            },
          }).then((res) => {
            console.log(res);
            // console.log(res.token);
            // Cookies.set('token',JSON.stringify(res))
            if (!res.errorMsg) {
              localStorage.setItem("token", res.token);
              localStorage.setItem("user", res.nickName);
              // this.$router.push({
              //   path: "/home",
              // });

            this.$router.push('/home')
            }
          });
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped>
#login {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/image/banner.png);
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
}

.login_box {
  position: absolute;
  width: 378px;
  height: 378px;
  background: #efeff0;
  border-radius: 21px 21px 21px 21px;
  opacity: 0.9;
  margin-top: calc(15vw);
  margin-left: calc(70vw);
  display: flex;
  flex-direction: column;
}

.welcome_box {
  margin-top: 23px;
  margin-left: 5%;
}
.welcome {
  font-size: 18px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #96a3b0;
}
.system {
  font-size: 38px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #4e4e4e;
}
.login {
  margin-top: 30px;
  margin-left: -5px;
}
.loginBtn {
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 33px;
  width: 300px;
  height: 38px;
}
.userIup {
  width: 257px;
  height: 37px;
}
.box1 {
  width: 124px;
  height: 171px;
  background: #e1f2f9;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.3;
  position: absolute;
  top: 213px;
  left: 90px;
}
.box2 {
  width: 142px;
  height: 173px;
  background: #e1f2f9;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.3;
  position: absolute;
  top: 384px;
  left: 166px;
}
.text1 {
  width: 24px;
  height: 133px;
  font-size: 19px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #fefefe;
  writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
  writing-mode: tb-lr;
  position: absolute;
  top: 230px;
  left: 120px;
}
.text2 {
  width: 21px;
  height: 270px;
  font-size: 17px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #ffffff;
  writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
  writing-mode: tb-lr;
  white-space: nowrap;
  position: absolute;
  top: 230px;
  left: 180px;
}
.text3 {
  width: 37px;
  height: 205px;
  font-size: 30px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #6bb9da;
  writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
  writing-mode: tb-lr;
  position: absolute;
  top: 300px;
  left: 225px;
}
.juzao1 {
  width: 211px;
  height: 48px;
  font-size: 38px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #d7e8fa;
  opacity: 0.3;
  position: absolute;
  top: 735px;
  left: 1180px;
}
.juzao2 {
  width: 118px;
  height: 26px;
  font-size: 21px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #409eff;
  position: absolute;
  top: 761px;
  left: 1185px;
}
.banquan {
  width: 428px;
  height: 17px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #565656;
  position: absolute;
  top: 758px;
  left: 470px;
}
</style>

<style>
.el-icon-lock {
  color: rgb(120, 183, 250);
  font-size: 18px;
}
.el-icon-user {
  color: rgb(120, 183, 250);
  font-size: 18px;
}
</style>